<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.muk.meis.model.bean.School"%>
<%@page import="com.muk.meis.model.service.SchoolService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MEIS</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script><![endif]-->
<link href="css/dropdown/themes/default/helper.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Beginning of compulsory code below -->

<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<!-- / END -->
<script language="javascript" type="text/javascript"
	src="js/flot/jquery-1.6.2.js"></script>
<script language="javascript" type="text/javascript"
	src="js/flot/jquery.flot.js"></script>
<style type="text/css">
.mesi_header_m {
	color: #F00;
}
</style>
</head>
<body>
	<form>
		<!-- chart -->
		<script type="text/javascript">
			$(function() {
				
				var d1 = [ [ 1, 40 ], [ 2, 31 ], [ 3, 43 ], [ 4, 50 ],
						[ 5, 37 ], [ 6, 49 ] ];
				var d2 = [ [ 1, 35 ], [ 2, 23 ], [ 3, 30 ], [ 4, 19 ],
						[ 5, 26 ], [ 6, 30 ] ];
				var d3 = [ [ 1, 42 ], [ 2, 37 ], [ 3, 25 ], [ 4, 41 ],
						[ 5, 29 ], [ 6, 53 ], [ 7, 53 ], [ 8, 59 ], [ 9, 35 ] ];
				/*
				var datasets = {"730062":{label:"บ้านกุดแข้",data:[ [ 1, 40 ], [ 2, 31 ], [ 3, 43 ], [ 4, 50 ],[ 5, 37 ], [ 6, 49 ] ]},
						        "730063":{label:"บ้านกุดแข้ใต้",data:[ [ 1, 35 ], [ 2, 23 ], [ 3, 30 ], [ 4, 19 ],[ 5, 26 ], [ 6, 30 ] ]},
						        "730065":{label:"บ้านดงยาง2",data:[ [ 1, 42 ], [ 2, 37 ], [ 3, 25 ], [ 4, 41 ],[ 5, 29 ], [ 6, 53 ], [ 7, 53 ], [ 8, 59 ], [ 9, 35 ] ]}};
				*/
				/*
				$.plot($("#placeholder"), [ {
					label : "บ้านศรีบุญเรือง ",
					data : d1
				}, {
					label : "บ้านท่าไค้",
					data : d2
				}, {
					label : "บ้านส้มป่อย ",
					data : d3
				} ], {
					grid : {
						hoverable : true,
						clickable : true
					},
		               series: {
		                   lines: { show: true },
		                   points: { show: true }
		               },					
					xaxis : {
						ticks : [ [ -2, "อ.1" ], [ -1, "อ.2" ], [ 0, "อ.3" ],
								[ 1, "ป.1" ], [ 2, "ป.2" ], [ 3, "ป.3" ],
								[ 4, "ป.4" ], [ 5, "ป.5" ], [ 6, "ป.6" ],
								[ 7, "ม.1" ], [ 8, "ม.2" ], [ 9, "ม.3" ],
								[ 10, "ม.4" ], [ 11, "ม.5" ], [ 12, "ม.6" ] ]
					}
				});
				*/
				
				function showTooltip(x, y, contents) {
					$('<div id="tooltip">' + contents + '</div>').css({
						position : 'absolute',
						display : 'none',
						top : y + 5,
						left : x + 5,
						border : '1px solid #fdd',
						padding : '2px',
						'background-color' : '#fee',
						opacity : 0.80
					}).appendTo("body").fadeIn(200);
				}

				var previousPoint = null;
				$("#placeholder")
						.bind(
								"plothover",
								function(event, pos, item) {
									$("#x").text(pos.x.toFixed(2));
									$("#y").text(pos.y.toFixed(2));

									//if ($("#enableTooltip:checked").length > 0) {
									if (item) {
										if (previousPoint != item.dataIndex) {
											previousPoint = item.dataIndex;

											$("#tooltip").remove();
											var x = item.datapoint[0]
													.toFixed(2), y = item.datapoint[1]
													.toFixed(2);

											showTooltip(item.pageX, item.pageY,
													"จำนวนนักเรียน = " + y);
										}
									} else {
										$("#tooltip").remove();
										previousPoint = null;
									}
									//}
								});

				$("#placeholder").bind(
						"plotclick",
						function(event, pos, item) {
							if (item) {
								$("#clickdata").text(
										"You clicked point " + item.dataIndex
												+ " in " + item.series.label
												+ ".");
								plot.highlight(item.series, item.datapoint);
							}
						});

			});
			
			/*
		    var choiceContainer = $("#mainTable");
		    
		    $('#mainTable tr').each(function() {
		    	alert('test');
		    });
		    
			function plotAccordingToChoices() {
				alert(choiceContainer);
		        var data = [];
		        
		        choiceContainer.find('tr').each(function(){
		        	alert('test');
		        });

		        choiceContainer.find("tr:td:input:[type='checkbox']").each(function () {
		            //alert(key);
		            var key = $(this).attr("name");
		            if (key && datasets[key])
		                data.push(datasets[key]);
		        });

		        if (data.length > 0)
		            $.plot($("#placeholder"), data,  {
						grid : {
							hoverable : true,
							clickable : true
						},
			               series: {
			                   lines: { show: true },
			                   points: { show: true }
			               },					
						xaxis : {
							ticks : [ [ -2, "อ.1" ], [ -1, "อ.2" ], [ 0, "อ.3" ],
									[ 1, "ป.1" ], [ 2, "ป.2" ], [ 3, "ป.3" ],
									[ 4, "ป.4" ], [ 5, "ป.5" ], [ 6, "ป.6" ],
									[ 7, "ม.1" ], [ 8, "ม.2" ], [ 9, "ม.3" ],
									[ 10, "ม.4" ], [ 11, "ม.5" ], [ 12, "ม.6" ] ]
						}
					});				
			}
			*/
			//plotAccordingToChoices();
			
		</script>
       <div>
       
       <jsp:include page="menu.jsp"></jsp:include>
		
		
                
                <div style="position:relative;padding-top: 60px; padding-left:350px;">
                   <select>
                        <option>2554</option>
                        <option>2553</option>
                   </select>
                   <input type="submit" value="ok">
                </div>
                
                <!-- chart -->
                <div style="position:relative;padding-top:20px;padding-left:90px;">
                   <div id="placeholder" style="width: 800px; height: 300px;"></div>
                </div>
                <!-- table -->
                
                <div style="position:relative;padding-top:30px;">
                        <table id="mainTable" cellspacing="0">
                            <tr style="background-image:url(image/header_table_background.jpg)">
                                <td align="center">แสดง</td>
                                <td align="center">โรงเรียน </td>
                
                                <td width="50" align="center">อ.1</td>
                                <td width="50" align="center">อ.2</td>
                                <td width="50" align="center">อ.3</td>
                                
                                <td width="50" align="center">ป.1</td>
                                <td width="50" align="center">ป.2</td>
                                <td width="50" align="center">ป.3</td>
                                <td width="50" align="center">ป.4</td>
                                <td width="50" align="center">ป.5</td>
                                <td width="50" align="center">ป.6</td>
                
                                <td width="50" align="center">ม.1</td>
                                <td width="50" align="center">ม.2</td>
                                <td width="50" align="center">ม.3</td>
                                <td width="50" align="center">ม.4</td>
                                <td width="50" align="center">ม.5</td>
                                <td width="50" align="center">ม.6</td>
                
                                
                            </tr>
                            <%
                                String dataSet = "{";
                                List<School> schoolList = SchoolService.getList();
                                List<String> lst5=SchoolService.getListTop5PerCode();
                                for (School school : schoolList) {
                                	dataSet+="\""+school.getPercodeCode()+"\""+":{label:"+"\""+school.getSchoolName()+"\""+",data:[";
                                	dataSet+="[-2,"+(school.getKindergartenMan1()+school.getKindergartenGirl1())+"],";
                                	dataSet+="[-1,"+(school.getKindergartenMan2()+school.getKindergartenGirl2())+"],";
                                	dataSet+="[0,"+(school.getKindergartenMan3()+school.getKindergartenGirl3())+"],";
                                	
                                	dataSet+="[1,"+(school.getPrimaryEducationMan1()+school.getPrimaryEducationGirl1())+"],";
                                	dataSet+="[2,"+(school.getPrimaryEducationMan2()+school.getPrimaryEducationGirl2())+"],";
                                	dataSet+="[3,"+(school.getPrimaryEducationMan3()+school.getPrimaryEducationGirl3())+"],";
                                	dataSet+="[4,"+(school.getPrimaryEducationMan4()+school.getPrimaryEducationGirl4())+"],";
                                	dataSet+="[5,"+(school.getPrimaryEducationMan5()+school.getPrimaryEducationGirl5())+"],";
                                	dataSet+="[6,"+(school.getPrimaryEducationMan6()+school.getPrimaryEducationGirl6())+"],";
                                	
                                	dataSet+="[7,"+(school.getHighSchoolMan1()+school.getHighSchoolGirl1())+"],";
                                	dataSet+="[8,"+(school.getHighSchoolMan2()+school.getHighSchoolGirl2())+"],";
                                	dataSet+="[9,"+(school.getHighSchoolMan3()+school.getHighSchoolGirl3())+"],";
                                	dataSet+="[10,"+(school.getHighSchoolMan4()+school.getHighSchoolGirl4())+"],";
                                	dataSet+="[11,"+(school.getHighSchoolMan5()+school.getHighSchoolGirl5())+"],";
                                	dataSet+="[12,"+(school.getHighSchoolMan6()+school.getHighSchoolGirl6())+"] ] },";                                	
                            %>
                            <tr>
                                <%
                                boolean isTop5= false;                               
                                isTop5 = lst5.contains(school.getPercodeCode());
                                if(isTop5) {
                                %>
                                <td><input type="checkbox" name="<%=school.getPercodeCode()%>" 
                                           id="<%="id"+school.getPercodeCode()%>"
                                           onclick="plotAccordingToChoices()" checked="checked" /></td>
                                <%} else { %>
                                <td><input type="checkbox" name="<%=school.getPercodeCode()%>" 
                                           id="<%="id"+school.getPercodeCode()%>"
                                           onclick="plotAccordingToChoices()" /></td>                                
                                <%} %>
                                <td><%=school.getSchoolName()%></td>
                
                                <td align="center"><%=(school.getKindergartenMan1()+school.getKindergartenGirl1())%></td>
                                <td align="center"><%=(school.getKindergartenMan2()+school.getKindergartenGirl2())%></td>
                                <td align="center"><%=(school.getKindergartenMan3()+school.getKindergartenGirl3())%></td>
                                
                                <td align="center"><%=(school.getPrimaryEducationMan1()+school.getPrimaryEducationGirl1())%></td>
                                <td align="center"><%=(school.getPrimaryEducationMan2()+school.getPrimaryEducationGirl2())%></td>
                                <td align="center"><%=(school.getPrimaryEducationMan3()+school.getPrimaryEducationGirl3())%></td>
                                <td align="center"><%=(school.getPrimaryEducationMan4()+school.getPrimaryEducationGirl4())%></td>
                                <td align="center"><%=(school.getPrimaryEducationMan5()+school.getPrimaryEducationGirl5())%></td>
                                <td align="center"><%=(school.getPrimaryEducationMan6()+school.getPrimaryEducationGirl6())%></td>
                                
                                <td align="center"><%=(school.getHighSchoolMan1()+school.getHighSchoolGirl1())%></td>
                                <td align="center"><%=(school.getHighSchoolMan2()+school.getHighSchoolGirl2())%></td>
                                <td align="center"><%=(school.getHighSchoolMan3()+school.getHighSchoolGirl3())%></td>
                                <td align="center"><%=(school.getHighSchoolMan4()+school.getHighSchoolGirl4())%></td>
                                <td align="center"><%=(school.getHighSchoolMan5()+school.getHighSchoolGirl5())%></td>
                                <td align="center"><%=(school.getHighSchoolMan6()+school.getHighSchoolGirl6())%></td>
                                
                            </tr>
                            <%
                                }
                                dataSet = dataSet.substring(0, dataSet.length()-1).toString();
                                dataSet += "}";
                            %>
                        </table>
                </div>
                <!-- table -->
                <script>
	    		    var choiceContainer = $("#mainTable");
	    		    
	    		    /*
					var datasets = {"730062":{label:"บ้านกุดแข้",data:[ [ 1, 40 ], [ 2, 31 ], [ 3, 43 ], [ 4, 50 ],[ 5, 37 ], [ 6, 49 ] ]},
					        "730063":{label:"บ้านกุดแข้ใต้",data:[ [ 1, 35 ], [ 2, 23 ], [ 3, 30 ], [ 4, 19 ],[ 5, 26 ], [ 6, 30 ] ]},
					        "730065":{label:"บ้านดงยาง2",data:[ [ 1, 42 ], [ 2, 37 ], [ 3, 25 ], [ 4, 41 ],[ 5, 29 ], [ 6, 53 ], [ 7, 53 ], [ 8, 59 ], [ 9, 35 ] ]}};
	    		    */
	    		    
	    		    var datasets = <%=dataSet%>; 
	    			function plotAccordingToChoices() {
	    		        var data = [];
	
	    		        choiceContainer.find("input:checked").each(function () {
	    		            var key = $(this).attr("name");
	    		            if (key && datasets[key])
	    		                data.push(datasets[key]);
	    		        });
	
	    		        if (data.length > 0)
	    		            $.plot($("#placeholder"), data,  {
	    						grid : {
	    							hoverable : true,
	    							clickable : true
	    						},
	    			               series: {
	    			                   lines: { show: true },
	    			                   points: { show: true }
	    			               },					
	    						xaxis : {
	    							ticks : [ [ -2, "อ.1" ], [ -1, "อ.2" ], [ 0, "อ.3" ],
	    									[ 1, "ป.1" ], [ 2, "ป.2" ], [ 3, "ป.3" ],
	    									[ 4, "ป.4" ], [ 5, "ป.5" ], [ 6, "ป.6" ],
	    									[ 7, "ม.1" ], [ 8, "ม.2" ], [ 9, "ม.3" ],
	    									[ 10, "ม.4" ], [ 11, "ม.5" ], [ 12, "ม.6" ] ]
	    						}
	    					});				
	    			}
	    			
	    			plotAccordingToChoices();                
                </script>
            <div style="position:relative;top:30px;height:40px;width:1000px;background-image:url(image/footer_bar.jpg);background-repeat:repeat-x;"> 
                <div style="position:relative;padding-top:10px;padding-left:10px;">
                     <div>Copy rigth @ Mudahan education information system</div>
                </div>
            </div>
    </div>
	</form>
</body>
</html>